<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue 生命周期</title>
    <script src="./vue.js"></script>
</head>

<body>
    <pre>
    1. 学习生命周期的意义：有助于理解 Vue 实例的运行方式、完成更复杂的功能、分析错误原因等

    2. 实例的生命周期：Vue 实例从被创建到挂载到页面中运行，再到不用时卸载、销毁的过程
    
    3. 钩子函数： 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数，这些方法是 Vue 给提供的

    4. Vue 生命周期经过 3 个阶段： 创建、更新、销毁
  </pre>

    <div id="root">
        <div class="box">
            <h5>{{ msg }}</h5>
            <button @click="msg = 'Jerry'">更改数据</button>
        </div>
    </div>
    <!-- Vue 生命周期分为三个阶段：创建阶段、运行阶段、销毁阶段 -->

    <script>
        // 1. new Vue 开始创建 Vue 实例
        var vm = new Vue({
            el: '#root',
            data: {
                msg: "Tom"
            },
            methods: {
                handle() {
                    console.log('Jerry')
                }
            },
            beforeCreate() {
                // 在这个阶段，创建了一个空的 Vue 实例对象，这时候，只有钩子函数、以及默认的方法能够被调用
                // 注意：在这个阶段，是不能够访问 data 中的数据，以及自定义时间
                // console.log(this.msg)
                // this.handle()
            },
            created() {
                // ★★★★★
                // 在这个阶段，data 以及 methods 中的方法以及被初始化完成，这时候可以进行调用
                // 注意：在实际开发中，如果想最早的获取到后台返回的数据，也就是调用 ajax ，最早就应该在 created
                // console.log(this.msg)
                // this.handle()
            },
            beforeMount() {
                // 只需要知道，在这个阶段，Vue 在编译、解析模板即可
                // 在这个阶段， Vue 开始对模板进行编译，进行解析，将 数据 和 模板中使用的位置开始进行连接，
                // 在内存中生成一个模板字符串，生成一个 DOM 结构，但是需要注意： 是在内存中生成的，还没有渲染到浏览器中
                // console.log(document.querySelector('h5'))
            },
            mounted() {
                //  ★★★★★
                // 到这个阶段，就已经把内存中生成的 DOM 替换到页面中，这时候就可以进行 DOM 操作
                // 操作 DOM 最早的位置就是在 mounted 中
                // 到这个阶段，Vue 创建阶段就已经完成了，到这个阶段， Vue 模板全部解析完毕，数据 和 模板完成结合，生成页面
                // console.log(document.querySelector('h5'))
            },
            beforeUpdate() {
                // 在这个钩子函数中， 页面中显示数据是旧的，但是 data 中数据是最新的，
                // 在这个阶段，vue 是监听到更新，在内存里面再次生成一份 虚拟的 DOM，但是这个虚拟的 DOM 还没有渲染到页面上
                // 所以页面数据是之前的，老的，但是数据是最新的
                // console.log(document.querySelector('h5'))
                // console.log(this.msg)
            },
            updated() {
                // 在这个阶段， 最新的数据以及和内存的 DOM 已经编译成功，替换到真正的 DOM 
                console.log(document.querySelector('h5'))
                console.log(this.msg)
            },
        })
    </script>

</body>

</html>